<template>
    <div class="base-info-container">
        <el-form
            ref="logoRef"
            :model="ruleFormLogo"
            :rules="rulesLogo"
            label-width="120px"
            class="upload-Img"
            status-icon
        >
            <el-form-item label="上传网站Logo" prop="logo">
                <el-upload ref="uploadRef" action="#" :limit="1" :on-exceed="handleExceed" list-type="picture" :on-change="file=>handleImgChange(file,fileList,'add')" :on-remove="file=>handleImgChange(file,fileList,'delete')" :auto-upload="false">
                    <div class="choose-area">
                        <Icon icon="upload-image" size="100px" />
                    </div>  
                    <template #file="{ file }">
                        <el-image
                            class="preview-logo"
                            preview-teleported
                            :src="fileUrl"
                            lazy
                            :zoom-rate="1.2"
                            :max-scale="7"
                            :min-scale="0.2"
                            :preview-src-list="[fileUrl]"
                            :initial-index="0"
                            fit="cover"
                            
                        /> 
                        <span class="delete-btn-wrapper" @click="handleRemove">
                            <Icon icon="delete" />
                        </span>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="submitLogo()">确认</el-button>
            </el-form-item>
        </el-form>
        <div class="policy-wrapper">
            <label><span>用户隐私协议</span>
                <el-dialog v-model="isShowPolicy" :close-on-click-modal="false"	:close-on-press-escape="false" title="编辑用户隐私协议" center width="800">
                        <el-input v-model="ruleFormPolicy.privacyPolicy" :autosize="{ minRows: 20}" type="textarea" />
                        <div class="submit_btn_wrapper">
                            <el-button type="success" @click="submitPolicy">提交</el-button>
                        </div>
                </el-dialog>
            </label>
            <el-button type="success" @click="openPolicy">编辑</el-button>
        </div>
        <div class="footer-info-wrapper">
            <label><span>地址</span>
                <el-input v-model="ruleFormFooter.address" :disabled="isEditFooter[0]" />
                <el-button type="success" @click="openFooter(0)">{{showFooter.address?'确认':"编辑"}}</el-button>
            </label>
            <label><span>联系我们</span>
                <el-input v-model="ruleFormFooter.contact" :disabled="isEditFooter[1]" />
                <el-button type="success" @click="openFooter(1)">{{showFooter.contact?'确认':"编辑"}}</el-button>
            </label>
            <label><span>版权声明</span>
                <el-input v-model="ruleFormFooter.copyright" :disabled="isEditFooter[2]" />
                <el-button  type="success" @click="openFooter(2)">{{showFooter.copyright?'确认':"编辑"}}</el-button>
            </label>
            
        </div>
    </div>

</template>

<script setup>
    import { ref,onBeforeMount } from 'vue';
    import Icon from '@/components/Icon.vue';
    import {editFooter,uploadLogo,editPolicy,getWebsiteInfo} from '@/api/index.js';
    import {genFileId, ElInput,ElMessage,ElForm,ElFormItem,ElUpload,ElDialog,ElImage,ElButton} from 'element-plus';
    const ruleFormLogo = ref({logo:''});
    const fileUrl = ref('');
    const rulesLogo = {
        logo:[{required:true,message:'请上传Logo',trigger:'blur'}]
    };
/*表单的模板引用*/
const logoRef = ref(null);
const uploadRef =ref(null);
/*表单变量*/
const isShowPolicy = ref(false);
const ruleFormPolicy = ref({privacyPolicy:''});
const ruleFormFooter = ref({address:'',contact:'',copyright:''});
let showFooter = ref({
    address:false,
    contact:false,
    copyright:false
});
let isEditFooter = ref([true,true,true]);
onBeforeMount(()=>{
    getWebInfo();
})
/*方法*/
//获取网站基本信息
const getWebInfo=()=>{
    getWebsiteInfo().then(res=>{
        if(res.status.code === 200){
            ruleFormPolicy.value.privacyPolicy = res.data.privacyPolicy.replace('<pre>','').replace('</pre>','');
            ruleFormFooter.value = JSON.parse(res.data.footer);
        }
    });
}
/*处理图片上传方法*/
//处理图片的改变
const handleImgChange = (file,fileList,type)=>{
    if(type === 'add'){
        fileUrl.value = file.url;
        ruleFormLogo.logo = file.raw;
    }else{
        uploadRef.value.clearFiles();
        fileUrl.value = '';
        ruleFormLogo.logo = null;
    }
}
//替换之前上传的图片
const handleExceed = (files) => {
      uploadRef.value.clearFiles();
      const file = files[0];
      file.uid = genFileId();
      uploadRef.value.handleStart(file);
}
//关闭预览图片
const handleRemove = () => {
    handleImgChange(null,null,'delete');
    uploadRef.value.clearFiles();
}
//确认上传Logo
const submitLogo = () => {
    if(fileUrl.value.includes('blob:')){
        logoRef.value.validate((valid)=>{
            if(valid){
                const param = new FormData();
                param.append('logo',ruleFormLogo.logo);
                uploadLogo(param).then(res=>{
                    if(res.status.code === 200){
                        ElMessage.success(res.status.msg);
                        handleRemove();
                    }else{
                        ElMessage.error(res.status.msg);
                    }
                });
            }
        })
    }else if(fileUrl.value.includes('/logo/')){
        ElMessage.success('已上传');
    }else{
        ElMessage.error('上传失败');
    }
}
//打开隐私政策
const openPolicy = () => {
    isShowPolicy.value = !isShowPolicy.value;
}
//提交隐私政策
const submitPolicy = () => {
    editPolicy({policy:ruleFormPolicy.value.privacyPolicy}).then(res=>{
        if(res.status.code === 200){
            ElMessage.success(res.status.msg);
            isShowPolicy.value = false;
        }else{
            ElMessage.error(res.status.msg);
        }
    })
}
//打开底部信息
const openFooter = (val) => {
    isEditFooter.value[val] = false;
    switch (val) {
        case 0:
            if(showFooter.value.address) submitEdit('address',val);
            showFooter.value.address = !showFooter.value.address;
            break;
        case 1:
            if(showFooter.value.contact) submitEdit('contact',val);
            showFooter.value.contact = !showFooter.value.contact;
            break;
        case 2:
            if(showFooter.value.copyright) submitEdit('copyright',val);
            showFooter.value.copyright = !showFooter.value.copyright;
            break;
    }
    
}
//向后端发送修改请求
const submitEdit = (field,val) => {
    let param = {value:ruleFormFooter.value,field};
    editFooter(param).then(res=>{
        if(res.status.code === 200){
            ElMessage.success(res.status.msg);
            isEditFooter.value[val] = true;
        }else{
            ElMessage.error(res.status.msg);
        }
    })
}
</script>

<style scoped lang='scss'>
.submit_btn_wrapper{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.delete-btn-wrapper{
    color:lime;
    position: relative;
    z-index:100;
}
.base-info-container{
    padding: 20px;
}
.policy-wrapper{
    width: 410px;
    display:flex;
    justify-content: space-between;
    margin-bottom: 30px;
    label{
        
        span{
            font-size: 14px;
            color: #606266;
            line-height: 40px;
            padding: 0 12px 0 0;
            box-sizing: border-box;
        }
    }
}
.upload-Img{
    display: flex;
    .el-form-item__content div:first-child{
        display: flex;
    }
    .preview-logo{
        width:200px;
        height: 80px;
        border: 2px dashed #ff0000;
        margin-left: 30px;
    }
    .choose-area{
        display: flex;
        height:100px;
        align-items: center;
        color:#a9a9a9;
    }
}
.footer-info-wrapper{
    width:410px;
    label{
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        span{
            width: 100px;
            font-size: 14px;
            color: #606266;
            line-height: 40px;
            padding: 0 12px 0 0;
            box-sizing: border-box;
        }
    }
}

</style>